<template>
  <form class="studentForm">
    <input v-model="stuForDatas.id" type="hidden" class="studentIdToEdit" />

    <label for="studentName">Name</label>
    <input v-model="stuForDatas.name" type="text" name="name" class="studentName" required />

    <label for="studentGender">Gender</label>
    <select v-model="stuForDatas.gender" name="gender" class="studentGender" required>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>

    <label for="studentHobbies">Hobbies</label>
    <input
      v-model="stuForDatas.hobbies"
      type="text"
      name="hobbies"
      class="studentHobbies"
      required
    />

    <label for="studentEmail">Email</label>
    <input v-model="stuForDatas.email" type="email" name="email" class="studentEmail" required />

    <label for="studentPhone">Phone</label>
    <input v-model="stuForDatas.phone" type="text" name="phone" class="studentPhone" required />

    <label for="studentAge">Age</label>
    <input v-model="stuForDatas.age" type="number" name="age" class="studentAge" required />

    <button type="submit" @click.prevent="saveStuInfo" class="saveStudentBtn">保存信息</button>
  </form>
</template>

<script setup lang="ts">
import { ref, toValue, watch } from 'vue'

export interface IStudent {
  id: string | number
  name: string
  gender: string
  hobbies: string
  email: string
  phone: string
  age: number | string
  create_at?: string
  update_at?: string
  checkedlist?: boolean
}

const porpss = defineProps<{
  userInfo: IStudent
}>()

let stuForDatas = ref<IStudent>(porpss.userInfo)

// watch(
//   () => toValue(porpss.userInfo),
//   (newVal) => {
//     stuForDatas.value = newVal
//   }
// )

const stu = (data: IStudent) => {
  stuForDatas.value = data
}

const emit = defineEmits(['saveStuInfo'])

const saveStuInfo = () => {
  emit('saveStuInfo', stuForDatas.value)
}

const setteData = () => {
  stuForDatas.value = {
    id: '',
    name: '',
    gender: '',
    hobbies: '',
    email: '',
    phone: '',
    age: 0
  }
}
defineExpose({
  stu,
  setteData
})
</script>

<style lang="scss" scoped>
@import './style/demo1.scss';
</style>
